<template>
    <el-container style="height: 100%">
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="2" class="el-menu-vertical-demo" style="height: 100%" @open="handleOpen" @close="handleClose">
                    <el-menu-item @click="addTab('UserManager', '用户管理')">
                        <!-- <i class="el-icon-document"></i> -->
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('DeptManage', '部门管理')">
                        <span slot="title">部门管理</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('RoleManager', '角色管理')">
                        <span slot="title">角色管理</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('ModeManager', '模块管理')">
                        <span slot="title">模块管理</span>
                    </el-menu-item>
                     <el-menu-item @click="addTab('ConstantManager', '常量管理')">
                        <span slot="title">常量管理</span>
                    </el-menu-item>
                     <el-menu-item @click="addTab('SystemManager', '系统日志')">
                        <span slot="title">系统日志</span>
                    </el-menu-item>
                     <el-menu-item @click="addTab('PersonalManager', '个人设置')">
                        <span slot="title">个人设置</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('WarningTimeRule', '预警时间规则')">
                        <span slot="title">预警时间规则</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('WarningEventRule', '预警事件规则')">
                        <span slot="title">预警事件规则</span>
                    </el-menu-item>
                    <el-menu-item @click="addTab('AnticipationRules', '预判规则')">
                        <span slot="title">预判规则</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs id='tabs' v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" >
                    <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                        <div :is="item.content"></div>
                    </el-tab-pane>
                </el-tabs>
                <!--                <user-manager></user-manager>-->
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import UserManager from './user_manager';
import DeptManage from './dept_manager';
import RoleManager from './role_manager';
import ModeManager from './mode_manager';
import ConstantManager from './constant_manager';
import SystemManager from './system_manager';
import PersonalManager from './personal_manager';
import WarningTimeRule from '../planning_mechanism/warning_time_rule';
import WarningEventRule from '../planning_mechanism/warning_event_rule';
import AnticipationRules from '../planning_mechanism/anticipation_rules';
import '../../../common/jdCommon.css';
export default {
    components: { UserManager, DeptManage, RoleManager, ModeManager,ConstantManager,SystemManager,PersonalManager,WarningTimeRule,WarningEventRule,AnticipationRules},
    data() {
        return {
            isCollapse: true,
            editableTabsValue: 'UserManager',
            editableTabs: [
                {
                    title: '用户管理',
                    name: 'UserManager',
                    content: 'UserManager'
                }
            ],
            tabIndex: 1
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            debugger;
            console.log(key, keyPath);
            this.$router.push({
                path: '/dept_manager'
            });
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //新增页面
        addTab(targetName, title) {
            let flg = true;
            this.editableTabs.forEach((e) => {
                if (e.name === targetName) {
                    this.editableTabsValue = targetName;
                    flg = false;
                }
            });
            if (flg) {
                this.editableTabs.push({
                    title: title,
                    name: targetName,
                    content: targetName
                });
                this.editableTabsValue = targetName;
            }
        },
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
        }
    }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
